<template>
  <div class="lyric">
    <el-row justify="space-around">
      <el-col :span="8" :xs="6">
        <p
          class="lyric-time"
          v-for="(item, index) in lyricTimeList"
          :key="index"
        >
          {{ item }}
        </p>
      </el-col>
      <el-col :span="12">
        <p
          class="lyric-text"
          v-for="(item, index) in lyricTextList"
          :key="index"
        >
          {{ item }}
        </p>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import emitter from '@/utils/mitt/eventbus'
import musicFormat from '../utils/index'

export default defineComponent({
  setup() {
    let lyricTextList = ref(null)
    let lyricTimeList = ref(null)
    emitter.on('getLyric', (lyric: any): void => {
      lyricTextList.value = musicFormat.lyricFormat(lyric)[1]
      lyricTimeList.value = musicFormat.lyricFormat(lyric)[0]
    })
    return { lyricTextList, lyricTimeList }
  }
})
</script>

<style scoped lang="less">
.lyric {
  height: 429px;
  overflow-y: auto;
  p {
    color: #fff;
    margin: 20px;
  }
  .lyric-time {
    color: rgb(185, 185, 185);
    text-align: center;
  }
}
</style>
